#include('header.html')
<script type="text/javascript">
	// 改变侧边栏激活
	changeTab(4);
</script>
<style>
	.email-content {
		max-height: 260px;
		overflow-y: auto;
		word-break: break-all;
	}
</style>
<div id="email" class="admin-content">
	<div class="pop-dialog" style="display: none;">
		<div class="pop-body">
			<span class="pop-close">&bigotimes;</span>
			<div class="pop-content">
				<div class="panel panel-info">
					<div class="panel-heading">
						<h4 class="panel-title">邮件详情</h4>
					</div>
					<div class="panel-body">
						<table class="table table-bordered">
							<tr>
								<td><b>发件人：</b>{{showEmail.name}}</td>
								<td><b>时间：</b>{{showEmail.time}}</td>
							</tr>
							<tr>
								<td colspan="3">
									<div class="email-content">{{showEmail.content == null ? '无内容':showEmail.content}}</div>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="admin-box">
		<div class="col-lg-12 col-xs-12">
			<h4 class="pull-left"><a href="/admin/email">邮箱管理</a></h4>
			<div class="pull-right">
				<form @submit.prevent="search_">
					<input v-model="searchName" placeholder="发件人">
					<button type="submit" style="border-radius: 5px;" class="btn btn-default btn-sm">搜索</button>
				</form>
			</div>
		</div>

		<div>
			<div class="col-lg-4 col-sm-4 col-xs-12">
				<div class="box-min" style="background-image: url('/static/images/admin/mail.png');">
					<div>
						<span>总邮件数</span>
						<p><strong>{{numInfo.all}}</strong></p>
						<p @click="jumpPage(1, -1)">查看</p>
					</div>
				</div>
			</div>

			<div class="col-lg-4 col-sm-4 col-xs-12">
				<div class="box-min" style="background-image: url('/static/images/admin/mail_yd.png');">
					<div>
						<span>已读邮件</span>
						<p><strong>{{numInfo.open}}</strong></p>
						<p @click="jumpPage(1, 1)">查看</p>
					</div>
				</div>
			</div>

			<div class="col-lg-4 col-sm-4 col-xs-12">
				<div class="box-min" style="background-image: url('/static/images/admin/mail_wd.png');">
					<div>
						<span>未读邮件</span>
						<p><strong>{{numInfo.close}}</strong></p>
						<p @click="jumpPage(1, 0)">查看</p>
					</div>
				</div>
			</div>
		</div>
		
		<div class="col-lg-12 col-xs-12 table-responsive">
			<table class="table-bordered table table-striped">
				<thead>
					<tr>
						<td>发件人</td>
						<td>性别</td>
						<td>电话</td>
						<td>邮箱</td>
						<td>发送时间</td>
						<td>状态</td>
						<td style="width: 130px;">操作</td>
					</tr>
				</thead>
				<tbody>
					<tr class="text-center" v-show="list.length <= 0">
						<td colspan="7">暂无数据</td>
					</tr>
					<tr is="em-tr" v-for="(item, index) in list" :email="item"
							:index="index" :show="show" :delete_="delete_"></tr>
				</tbody>
			</table>
		</div>
		<!-- 分页按钮 -->
		<div class="col-lg-12 col-xs-12 text-center" v-show="pages.totalPages > 1">
			<ul class="pagination pagination-sm">
				<li><a href="javascript:" @click="jumpPage(1)">首页</a></li>
				<li v-for="pageNo in pages.numbers" :class="pageNo == pages.pageNum ? 'active' :''">
					<a href="javascript:" @click="jumpPage(pageNo)">{{pageNo}}</a>
				</li>
				<li><a href="javascript:" @click="jumpPage(pages.totalPages)">尾页</a></li>
			</ul>
		</div>
	</div>
</div>
<template id="em-tr">
	<tr>
		<td>{{email.name}}</td>
		<td>{{email.sex == 1 ? '男':'女'}}</td>
		<td>{{email.tel}}</td>
		<td>{{email.email}}</td>
		<td>{{email.time}}</td>
		<td>
			<span class="label label-warning" v-if="email.status === 0">未读</span>
			<span class="label label-success" v-else-if="email.status === 1">已读</span>
		</td>
		<td>
			<button @click="show(index)" class="btn btn-xs btn-info">详情</button>
			<button @click="delete_(index)" class="btn btn-xs btn-danger">删除</button>
		</td>
	</tr>
</template>
<script>
	var em = new Vue({
		el: '.admin-content',
		data: {
		  numInfo: {
		    all: 0,
				open: 0,
				close: 0
			},
			list: [],
			showEmail: {},
      searchName: '',
      pages: { // 控制页码的显示
        totalRows: -1, // 总数据量
        totalPages: -1,// 总页数
        pageNum: 1, // 当前页码
        prevPage: 1, // 上一页
        nextPage: 1, // 下一页
        numbers: [] // 自动生成的页码数组
      },
			query: {
		    status: -1 // 全部
			}
		},
		methods: {
		  search_: function () {
        if (this.searchName !== '') {
          $.post('/email/like', {name: this.searchName}, function (data) {
						em.fillData(data, 1);
          });
        }
      },
		  delete_: function (index) {
        if (index >= 0 && index < this.list.length) {
					if (confirm("确定删除该邮件？")) {
            var de = this.list[index];
            $.post('/email/delete/' + de.id, function (data) {
              if (data.success) {
                em.list.splice(index, 1);
                em.flushNumInfo();
                em.flushEmail();
              }
            });
          }
				}
      },
			show: function (index) {
				this.showEmail = this.list[index];
				if (this.showEmail.status !== 1) {
          $.post('/email/change', {id: this.showEmail.id, status: 1}, function (data) {
            if (data.success) {
              if (em.showEmail.status !== 1) {
                em.showEmail.status = 1;
                em.numInfo.open++; em.numInfo.close--;
              }
            }
          });
        }
        openPop('email');
      },
			jumpPage: function (pageNo, status) {
				if (status !== undefined) {
				  this.query.status = status;
				}
        if (pageNo !== undefined) {
          if (pageNo <= 0) pageNo = 1;
          else if (pageNo > this.pages.totalPages) pageNo = this.pages.totalPages;
          this.pages.pageNum = pageNo;
        }
        this.flushEmail();
      },
      flushPage: function () {
        this.pages.numbers = createPage(this.pages.pageNum, this.pages.totalPages);
      },
			flushNumInfo: function () {
        $.post('/email/numInfo', function (data) {
          em.numInfo = data.payload;
        });
      },
			flushEmail: function () {
				$.post('/email/page/' + this.pages.pageNum, this.query, function (data) {
					em.fillData(data);
        });
      },
      fillData: function (data, totalNum) {
        if (data.success) {
          this.list = data.payload.rows || [];

          this.pages.totalRows = data.payload.totalRows;
          this.pages.totalPages = totalNum || data.payload.totalPages;
          this.pages.pageNum = totalNum || data.payload.pageNum;
          this.pages.prevPage = data.payload.prevPage;
          this.pages.nextPage = data.payload.nextPage;
        } else {
          this.list = [];
          this.pages.totalRows = 0;
          this.pages.totalPages = 0;
          this.pages.pageNum = 1;
        }
      }
		},
		watch: {
      'pages.totalPages': function (nv, ov) {
        this.flushPage();
      }
		},
		components: {
		  'em-tr': {
		    props: ['email', 'index', 'show', 'delete_'],
				template: '#em-tr'
			}
		},
		mounted: function () {
			this.flushEmail();
			this.flushNumInfo();
    }
	});

	window.closeBefore = function () {
	  window.setTimeout(function () {
      em.showEmail = {};
    }, 400);
  }
</script>
#include('footer.html')
